<template>
  <div>
    <dialog-subtitle>
      为了您资金安全，请输入验证码以确认绑定银行卡
    </dialog-subtitle>
    <el-form class="main-container-main__form" :model="form" :rules="rules" ref="form" :disabled="loading"
             @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})"
             label-position="top"
    >
      <el-form-item class="main-container-main__item" prop="code" :label="`手机号码：${user.telephone}`" :error="formError">
        <el-input class="main-container-main__input" v-model="form.code" placeholder="请输入验证码" auto-complete="off">
          <template slot="prepend">
            <svg-icon icon-class="login-security"></svg-icon>
          </template>
          <template slot="append">
            <el-button @click="sendCode({formItem: 'mobile'})"
                       type="dark"
                       shadow
                       :disabled="sendingCode"
                       size="medium">
              {{codeBtnText}}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item no-spacing>
        <el-button
          :block="true"
          type="primary"
          native-type="submit"
          :loading="loading"
        >确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {form, getCode} from '@/build';

  import {getValidateCode as codeApi, bankListBindApi as saveApi} from "@/services/api/user";

  export default {
    name: "card-addbind",

    mixins:[getCode,form],

    inject: ['setDialogHeader'],

    props: ['cardInfo'],

    data(){
      return {
        form: {
          name: this.cardInfo.name,
          cardNo: this.cardInfo.cardNo,
          code: undefined,
          mobile: '1',
          type: consts.CODE_CARD_BIND,
        },
        codeApi,
        formError: '',
        rules:{
          code: {required:true,message:'验证码不能为空！'}
        }
      };
    },

    computed: {
      ...mapState({
        user: state => state.user,
      }),
    },

    created() {
      this.setDialogHeader('绑定确认');
    },

    mounted(){
      this.bindSave(saveApi, 'saveForm', 'form', {
        beforeSend: (data) => {

          this.formError = '';
          return data;
        },
        successMessage: '绑定成功',
        afterSuccess: () => {
          this.$store.dispatch(types.OAUTH);
          this.$store.dispatch(types.GET_SECURITY);
          this.$emit('on-success');
        },
        afterFail: ([result, data]) => {
          this.formError = data.message;
        }
      });
    }
  };
</script>

<style lang="scss" scoped>

</style>
